<template>
  <div class="page-container">
    <div ref="con" class="container-chart">
      <!-- 第一个页面 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seriesData: [],
      chart: "",
      xData:[]
    };
  },
  mounted() {
    //页面一加载就调用接口
    this.getData();
    // this.initEchart();
    window.addEventListener('resize',()=>{
      this.screen()
      })
  },
  methods: {
    //封装一个屏幕控制大小的函数
    screen() {
      //改变数据图形的大小
      this.chart.resize();
      //可视宽度
      let width = this.$refs.con.offsetWidth;
      //设置字体的大小号
      //这个公式是我们自己测试出来
      //字体
      let num = (width / 100) * 6;
      //重新去创建一个配置项
      let option = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
      };
      //重新设置一下配置项
      this.chart.setOption(option);
    },
    getData() {
      this.$axios.get("/CropGrowthTrend").then((res) => {
        //整体数据
        //取出图例数组
        console.log(res, "数据结果");
        // this.xData = res.data.map(item=>item.content)
        this.seriesData = res.data.map(item=>{
          console.log(item,'iiii');
          let data = item.content.map(datainfo=>datainfo.area)
          this.xData = item.content.map(datainfo=>datainfo.month)
          console.log(data,'dd');
           return  {
            type: "line", //折线
            name: item.city,
            data: data,
            smooth: true, //是否是一个平缓的曲线
          }
        })

        // this.seriesData = res.data.content;
        this.$nextTick(() => {
          this.initEchart();
          this.screen()
        });
      });
    },
    async initEchart() {
      let myChart = this.$echarts.init(this.$refs.con);
      this.chart = myChart;
      let options = {
        title: {
          text: "主要地区农作物种植增长区域",
        },
        legend: {
          icon:'circle', //图例的图标为圆
          top:'10%',
          left:"15%"
        },
        grid:{
          // left:300
          left:"15%",
           top:'20%',
           right:"5%",
           bottom:"10%"
        },
        xAxis: {
          //data: ["1月", "2月", "3月", "4月", "5月", "6月"],
          data:this.xData,
          boundaryGap:true //两端是否留白
        },
        yAxis: {
          axisLine:{
            show:true
          }
        },
        series:{
          color: {
              // x,y 起点  x1,y1 终点 横向的渐变 。纵向 x2,y2["#6EABDA", "#2D5A7D"],
              type: "line",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#6EABDA",
                },
                {
                  offset: 1,
                  color: "#2D5A7D",
                },
              ],
            },
        },
        series:this.seriesData,
     
      };
      myChart.setOption(options);
    },
  },
};
</script>
